<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>post 请求传参JSON格式</h2>
    <button>点我发送</button>
    <script>
        // const data1 = { name: 'jack', age: 18 }
        // const data2 = '{"name":"jack","age":18}'  // 是JSON格式的字符串
        // const data3 = ['西瓜', '西兰花']
        // const data4 = '["西瓜","西兰花"]'  // 是

        // 序列化 ==> 把对象形式的数据转为JSON格式字符串
        // JSON.stringify()
        // 反序列化 ==> 把JSON格式的字符串转为对象
        // JSON.parse()
        const btn = document.querySelector('button')
        const api_login = `http://ajax-api.itheima.net/api/login`
        const params = { username: "admin", password: "123456" }

        // 点击按钮 发送请求
        btn.addEventListener('click', () => {
            // 调用ajax ，发送请求
            $http(api_login, params)
        })

        const $http = (url, params) => {
            const xhr = new XMLHttpRequest()
            xhr.open('POST', url)
            // 如果是表单  ajax-post 参考接口文档
            // 告诉后端 Content-type 我发的请求参数是什么形式的 
            // 1. ==> post请求，大多数情况都是这个格式，一般接口文档会指明 
            xhr.setRequestHeader('Content-type', 'application/json')
            // 2. 参数放到send中  ==> 传JSON格式的字符串
            xhr.send(JSON.stringify(params))

            xhr.addEventListener('readystatechange', () => {
                if (xhr.readyState !== 4) return
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                    console.log(JSON.parse(xhr.response))  // responseText
                } else {
                    console.log('不成功')
                }
            })
        }


    </script>
</body>

</html>